﻿<template>

    <div class="wish_container" >
        <header class="wish_header" ref="wish_header" >
          <img src="../../static/img/back_ccc.png" class="back_c"/>
          <span class="wish_header_n">
            愿望标题
          </span>
          <img src="../../static/img/wish_detail_header_detail.png" alt="Alternate Text" class="wish_detail_header_detail"/>
          <!-- wish detail list s -->
          <ul class="wish_detail_list">
            <li class="wish_detail_list_btn">
                <img src="../../static/img/wish_detail_collect.png" class="wish_detail_list_img">
                <span>收藏</span>
            </li>
            <li class="wish_detail_list_btn">
              <img src="../../static/img/wish_detail_share.png" class="wish_detail_list_img">
              <span>分享</span>
            </li>
            <li class="wish_detail_list_btn">
              <img src="../../static/img/wish_detail_flag.png" class="wish_detail_list_img">
              <span>提案</span>
            </li>
            <li class="wish_detail_list_btn">
              <img src="../../static/img/add_wish_detail.png" class="wish_detail_list_img">
              <span>参与</span>
            </li>
            <li class="wish_detail_list_btn">

              <span>匿名参与</span>
            </li>
          </ul>

          <!-- wish detail list e -->
          <ul></ul>
        </header>

      <!-- wish_detail img ss -->
        <img src="../../static/img/bg_all.png" class="bg_all_w_d" ref="bg_all_w_d">

      <!-- wish_detail img ee -->

      <!-- wish_detail nav s -->
      <div class="wish_detail_nav" ref="wish_detail_nav">
        <div class="wish_detail_name">
          <span>发起人</span>
          <img src="../../static/img/bg_all.png" class="wish_detail_name_img"/>
        </div>
        <div class="wish_detail_people">
          参与人数：999999999
        </div>
      </div>
      <!-- wish_detail nav e -->


      <!-- wish_detail main s -->
      <div class="wish_detail_main" ref="wish_detail_main">

        <!-- shema list s -->
        <div class="wish_detail_Main_scheme_list_wrapper">
          <img src="../../static/img/wish_detail_chema_list.png" class="wish_detail_chema_list">
          <ul class="wish_detail_Main_scheme_list_real">
            <li class="wish_detail_main_S_list_box">
              愿望描述
            </li>
            <li class="wish_detail_main_S_list_box">
              愿望描述
            </li>
            <li class="wish_detail_main_S_list_box">
              愿望描述
            </li>
            <li class="wish_detail_main_S_list_box">
              愿望描述
            </li>
            <li class="wish_detail_main_S_list_box">
              愿望描述
            </li>
          </ul>
        </div>
        <!-- shema list e -->

        <div class="wish_detail_main_top_btn wish_detail_header_left">进度详情</div>
        <div class="wish_detail_main_top_btn wish_detail_header_right">查看评论</div>
        <!-- wish_detail_main real s -->
        <div class="wish_detail_main_user_name">
          参与者
        </div>
        <!-- wish_detail_main real e -->
        <div class="wish_detail_main_wish_detail">
          <div class="wish_detail_main_wish_detail_header">
            愿望描述
          </div>
          <div class="wish_detaill_main_mess">
            先帝创业未半而中道崩殂，今天下三分，
            益州疲弊，此诚危急存亡之秋也。然侍卫之臣
            不懈于内，忠志之士忘身于外者，盖追先帝之
            殊遇，欲报之于陛下也。诚宜开张圣听，
            以光先帝遗德，恢弘志士之气，不宜妄自菲薄，
            引喻失义，以塞忠谏之路也。
          </div>
        </div>

        <div class="wish_detail_Main_scheme">
          <div class="wish_detail_main_wish_detail_header pl_header_scheme">
            方案一
            <div class="pl_header">评论</div>
          </div>
        </div>
      </div>
      <!-- wish_detail main e -->


    </div>

</template>

<script>
  import '../../static/css/FooterMenu.css';
  import {mapState, mapMutations, mapActions} from 'vuex';
  import store from '../vuex/store_index';
  import common from "../common/common.js"
  import use_rem from "../../static/js/use_rem.js"
  use_rem();
  export default {
    name: 'FooterMenu',
    data () {
      return {
        menu_list: this.$store.getters.get_footer_menu_list,
        sign_c: true
      }
    },
    computed: mapState([
      'footer_menu_list'
    ]),
    methods: {
      ...mapActions(['redirect']),
      jump: function (name) {
        let id = name.replace("./", "");
        //common.jump({
        //  url: name,
        //  id: id
        //});

        //关闭所有 webview
        let all = plus.webview.all();
        //current webview
        var curr = plus.webview.currentWebview();
        for (let i = 0, len = all.length; i < len; i++) {
          //关闭除setting页面外的其他页面
          if (all[i].getURL() == curr.getURL())
            continue;
            plus.webview.close(all[i]);
        }

        mui.openWindow({
          url:name,
          id: id,
          createNew: false,//是否重复创建同样id的webview，默认为false:不重复创建，直接显示
          show: {
            autoShow: true,//页面loaded事件发生后自动显示，默认为true
            aniShow: "zoom-fade-in",//页面显示动画，默认为”slide-in-right“；
          },
          waiting: {
            autoShow: true,//自动显示等待框，默认为true
            title: '正在加载...',//等待对话框上显示的提示内容
          }
        })

      }
    },
    mounted: function () {
//    this.$store.getters.Get_Bot_C_obj
      let wish_header = window.getComputedStyle(this.$refs.wish_header, "height").height.replace("px", "");
      let bg_all_w_d = window.getComputedStyle(this.$refs.bg_all_w_d, "height").height.replace("px", "");
      let main_h = document.body.clientHeight;
      let wish_detail_nav = window.getComputedStyle(this.$refs.wish_detail_nav, "height").height.replace("px", "");
      this.$refs.wish_detail_main.style.height = main_h - parseInt(wish_header) - parseInt(wish_detail_nav) - parseInt(bg_all_w_d) + "px";
    }
  }
</script>
<!--inner style for thom template-->
<style scoped>
  /*wish_detail_main s*/
  .wish_detail_main_S_list_box {
    width: 100%;
    height: 10.6vw;
    line-height: 10.6vw;
    text-align: center;
    color: #fff;
    background-color: #89c774;
    border-radius: 2vw;
  }
  .wish_detail_Main_scheme_list_real {
    position: absolute;
    width: 30vw;
    font-size:4vw;
    border-radius:2vw;
    top: 0;
    left: -31vw;
    z-index:100;
    background-color: #b4d9a3;
  }
  .wish_detail_Main_scheme_list_wrapper {
    position: absolute;
    top: 74vw;
    right: 5vw;
  }
  .wish_detail_chema_list {
    width: 7.7vw;
    height: 7.7vw;
  }
  .wish_detail_main {
    overflow-y: scroll;
    position: relative;
  }

  .wish_detail_Main_scheme {
    width: 89vw;
    margin: 8vw auto 0;
    border-radius: 2vw;
    box-shadow: 1px 1px 2px 4px #808080;
  }
  .pl_header_scheme {
    position: relative;
  }
  .pl_header{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    right:4vw;
  }
  .wish_detaill_main_mess {
    height: 35.2vw;
    overflow-y: scroll;
    padding: 2vw;
    font-size: 4vw;
    color: #a0a0a0;
  }
  .wish_detail_main_wish_detail_header {
    width: 100%;
    height: 7.3vw;
    line-height: 7.3vw;
    color: #fff;
    text-align: center;
    font-size: 4vw;
    background-color: #9f5c2f;
    border-radius: 2vw 2vw 0 0;
  }
  .wish_detail_main_wish_detail {
    width: 89vw;
    height: 42vw;
    border-radius: 2vw;
    margin: 4vw auto 0;
    box-shadow: 1px 1px 4px 2px #808080;
  }
  .wish_detail_main_user_name {
    width: 38vw;
    height: 6.9vw;
    line-height: 6.9vw;
    color: #fff;
    background-color: #9f5c2f;
    border-radius: 2vw;
    text-align: center;
    font-size: 4vw;
    margin: 0 auto;
  }
  .wish_detail_main {
    margin-top: 2vw;
    position: relative;
  }
  .wish_detail_header_left{
    position:absolute;
    top:0;
    left:0;
  }
  .wish_detail_header_right{
    position:absolute;
    top:0;
    right:0;
  }
  .wish_detail_main_top_btn {
    height: 6.9vw;
    line-height: 6.9vw;
    font-size: 4vw;
    width: 16.8vw;
    background-color: #aaaaaa;
    color: #fff;
    text-align: center;
  }
  /*wish_detail_main e*/
  /*wish_detail_nav s*/
  .wish_detail_name_img {
    height: 5.3vw;
    width: 5.3vw;
    border-radius: 2vw;
    vertical-align: sub;
  }
  .wish_detail_name {
    margin-left: 3.4vw;
  }
  .wish_detail_people{
    margin-right:6.9vw;
  }
  .wish_detail_nav {
    line-height: 8.2vw;
    height: 8.2vw;
    color: #a3a3a3;
    font-size: 4vw;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
  }
  /*wish_detail_nav e*/
  /*wish_detail s*/
  .bg_all_w_d {
    width: 100%;
    height: 56vw;
  }
  .wish_detail_header_detail {
    width: 5.6vw;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 5.6vw;
  }
  .wish_detail_list_img {
    width: 3.8vw;
    padding-right: 2vw;
    vertical-align: middle;
  }
  .wish_detail_list_btn {
    height: 8.8vw;
    line-height: 8.8vw;
    text-align: center;
    color: #fff;
  }
  .wish_detail_list {
    width: 20.8vw;
    height: 45vw;
    position: absolute;
    top: 9vw;
    right: 0.8vw;
    background-color: #b27a57;
    border-radius: 2vw;
  }
  .wish_header .wish_detail_rotate_90 {
    transform: rotate(-90deg) translateX(50%);
    right: 6vw;
    left: initial
  }
  /*wish_detail e*/
  /*wish_mid*/
  .wish_main {
    overflow-y: scroll;
    background-color: #eeeeee;
  }
  .wish_mid_wish .wish_mid_act_btn {
    color: #9f5c2f
  }
  .wish_mid_wish {
    height: 8.8vw;
    line-height: 8.8vw;
    color: #b5b5b5;
    font-size:3vw;
    text-align:center;
    display:flex;
    justify-content:space-around;
  }
  .wish_header_title {
    text-align: right;
  }
  .wish_header_w {
    text-indent: 6vw;
  }
  .wish_mid_right {
    line-height:1.2;
    font-size: 3.5vw;
    text-align:left;
    color: #9f5c2f;
    width: 66vw;
    height: 13.2vw;
    background-color: #fff;
    border-radius: 2vw;
    margin-top:2.1vw;
    padding:3vw;
  }
  .wish_seed {
    width: 16.6vw;
    display: block;
    padding-left: 4.8vw;
    padding-top: 3.4vw;
    height:15.3vw;
    margin-right:3.2vw;
  }
  .wish_mid {
    display:flex;
    height: 23.2vw;
    background-color: #eeeeee;
  }
  /*wish_mid*/
  .add_wish {
    width: 18vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #fff;
    font-size: 3.5vw;
    border-radius: 2vw;
    background-color: #d84848;
    margin-left: 2.5vw;
    display: inline-block;
    text-align: center;
  }
  .input_search {
    width: 42vw;
    height: 7.2vw;
    line-height: 7.2vw;
    color: #9f5c2f;
    border-radius: 2vw;
    margin-left: 18vw;
    border: 0;
  }
  .wish_header {
    height: 11.7vw;
    line-height: 11.7vw;
    color: #fff;
    font-size: 4vw;
    background-color: #9f5c2f;
    position: relative;
    text-align: center;
  }

  .wish_header_n {
    font-size: 4.5vw;
    color: #fff;
  }

  .back_c{
    height:6vw;
    width:5vw;
    position:absolute;
    top:50%;
    left:1.3vw;
    transform:translateY(-50%);
  }
</style>

